<template>
    <div>
      <h1>本地存储实验</h1>
      localStorage:
      {{Author}},
      sessionStorage:
      {{sessionName}}
      <button @click="change">change sessionStorage</button>
    </div>
</template>

<script>
export default {
  name: 'localStorage',
  data () {
    return {
      Author: '',
      sessionName: ''
    }
  },
  mounted () {
    this.setLocalStorage()
    this.Author = localStorage.getItem('Author')
    this.setSessionStorage()
    this.sessionName = sessionStorage.getItem('sessionName')
  },
  methods: {
    setLocalStorage () {
      // /设置localStorage保存到本地，第一个为变量名，第二个是值
      localStorage.setItem('Author', 'Jane')
      // // 获取数据
      // localStorage.getItem('Author')
      // // 删除保存的数据
      // localStorage.removeItem('Author')
      // // 清除所有保存的数据
      // localStorage.clear()
    },
    setSessionStorage () {
      // 设置sessionStorage保存到本地，第一个为变量名，第二个是值
      sessionStorage.setItem('sessionName', 'John')
      // // 获取数据
      // sessionStorage.getItem('sessionName')
      // // 删除保存的数据
      // sessionStorage.removeItem('sessionName')
      // // 清除所有保存的数据
      // sessionStorage.clear()
    },
    change () {
      sessionStorage.setItem('sessionName', 'dell')
      this.sessionName = sessionStorage.getItem('sessionName')
      localStorage.setItem('Author', 'Lilei')
      this.Author = localStorage.getItem('Author')
    }
  }
}
</script>

<style scoped>

</style>
